<template>
  <div class="container">
    <div class="most-expected">
      <h1>近期最受期待</h1>
      <div class="most-expected-list">
        <ul>
          <li
            v-for="list in expectedList"
          >
            <img :src="list.img | wh(255.315)" alt="">
            <h5>{{list.nm}}</h5>
            <h6>{{list.comingTitle}}</h6>
          </li>
        </ul>
      </div>
    </div>
    <div class="movie-list">
      <div
        v-for="value, key in comingList"
      >
        <h1>{{key}}</h1>
        <MovieList
          :list="value"
        ></MovieList>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
import BScroll from 'better-scroll'
import MovieList from '@/components/movies/m-list'
import _ from 'lodash'

Vue.use(Toast)

export default {
  props: ['list'],
  
  components: {
    MovieList
  },

  data() {
    return {
      expectedList: []
    }
  },

  computed: {
    comingList() {
      return _.groupBy(this.list, value => value.comingTitle)
    }
  },

  created() {
    this.ci = 1
    this.limit = 10
    this.offset = 0
    this.hasMore = true
    this.isLoading = false
  },

  methods: {
    // 分页加载数据
    _loadData() {
      return this.$http.get({
        url: '/ajax/mostExpected',
        params: {
          ci: this.ci,
          limit: this.limit,
          offset: this.offset,
          token: ''
        }
      }).then((result) => {
        this.hasMore = result.paging.hasMore
        return result
      })
    }
  },

  async mounted() {
    let result = await this._loadData()
    this.expectedList = result.coming
    
    // this.x = 200
    // console.log(document.querySelector('.movie-list').innerHTML)

    // 此时scroll 宽度为 0，因为Vue数据渲染是异步的
    // this.$nextTick(() => {
    //   new BScroll('.most-expected-list', {
    //     scrollX: true
    //   })
    // })
    // this.$nextTick() 使程序进入下一个事件循环去执行
    await this.$nextTick()
    
    const bs = new BScroll('.most-expected-list', {
      scrollX: true,
      probeType: 0
    })

    bs.on('scrollEnd', async () => {
      const maxScrollX = bs.maxScrollX
      
      // bs.x <= bs.maxScrollX 是否到达了滚动条的边界
      // this.hasMore 表示是否还有更多的数据
      // this.isLoading 表示现在是否正在加载数据
      if (bs.x <= bs.maxScrollX && this.hasMore && !this.isLoading) {
        // 刚刚进入到列表加载时
        this.isLoading = true
        this.offset += this.limit
        let nextList = await this._loadData()
        this.expectedList = [
          ...this.expectedList,
          ...nextList.coming
        ]
        await this.$nextTick()
        bs.refresh()

        // 新的列表已经加载完毕，可以进行下一次加载了
        this.isLoading = false
      }

      if (!this.hasMore && bs.x <= bs.maxScrollX) {
        
        Toast({
          message: '到底了~',
          position: 'top'
        })
      }
    })
  },
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/stylus/ellipsis.styl'
.container
  .most-expected
    h1
      padding .12rem
      font-weight 400
    .most-expected-list
      margin 0 .12rem
      height 1.57rem
      overflow hidden
      ul
        display flex
        width max-content
        li
          padding-right .12rem
          &:last-child
            padding-right 0
          img
            width .85rem
            height 1.15rem
          h5
            ellipsis(.85rem)
            font-weight 400
          h6
            font-weight 400
            color #999
            ellipsis(.85rem)
  .movie-list
    margin-top .12rem
    h1
      padding .12rem 0 0 .12rem
      font-weight 400
</style>